<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<?php include 'header.php';?>
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'general_form.css'?>">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
   <section id='body'>

        <!-- Tabs header -->
        <div id= body-container>
            <!-- Upload Avatar Form -->
            <form class='fill-in-form no-margin' method='post' id="avatar-upload" action="<?php echo site_url().'/user_group3/account/upload_avatar'?> " 
                               enctype="multipart/form-data" target="upload-target" onsubmit='StartUpload();'>
                <ol>
                    <div class="head">Profile: </div>
                    <li>
                    <div class="upload-file" style="cursor:pointer">
                        <image id="avatar-image" src="<?php echo image_url().'no-avatar.png'?>" class="avatar"/>
                        <span>Click here to upload your image</span>
                    </div>
                    <input id="upload-file" class="hidden" type="file" name="avatar" />
                    </li>
                </ol>
            </form>
            <iframe id="upload-target" name="upload-target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
            <!-- End of upload avatar form -->
            <form id="main-form" action="<?php echo site_url().'/user_group3/account/update_user_information'?>" method="post">
                <!--Hidden fields -->
                <input id='file_url' name='AvatarLink' type='text' value="<?php echo image_url().'no-avatar.png'?>" style='display:none'/>
                <ol>
                <!--Name Field-->
                    <!--<div class="head">*Name:</div>-->
                    <li>
                        <input id="UserName" class="text" type="text" placeholder="Name *" name="UserName">
                        <span id="UserName-error" class="error"/>
                    </li>   
                    <!--Age Field-->
                    <li>
                            <div class="styled-select" >
                                <select id="Age" name="Age" tabindex="0">
                                    <option value="">Age *</option>
                                    <?php for($i = 18; $i <= 60; $i++){ ?>
                                        <option value="<?php echo $i?>"><?php echo $i ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        <div id="Age-error" class="error" ></div>
                    </li>
                    
                    <li>
                            <div class="styled-select" >
                                <select id="Sex" name="Sex" tabindex="0">
                                    <option value="">Sex *</option>
                                    <option value="Unknown">Unknown</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div>
                        <div id="Sex-error" class="error" ></div>
                    </li>
                    
                    <li>
                            <div class="styled-select" >
                                <select id="MarriedStatus" name="MarriedStatus" tabindex="0">
                                    <option value="">Married Status *</option>
                                    <option value="Single">Single</option>
                                    <option value="Married">Married</option>
                                </select>
                            </div>
                        <div id="MarriedStatus-error" class="error" ></div>
                    </li>
                    <!--Address Field-->
                    <div class="head">Address: 
<!--                   <div id="add-address" class="margin-left add-btn" style='position:relative; left:8%'>+</div>
                        <div id="delete-address" class="margin-left add-btn" style='position:relative; left:16%'>-</div>-->
                    </div>
                    <div id="address-section" class="tab">
                        <div>
                        <li>   
                            <input class="text" type="text" placeholder="Province" name="Address[]">
                            <input class="text" type="text" placeholder="City"     name="Address[]">
                        </li>
                        <li>
                            <input  class="text" type="text" placeholder="Disrtict" name="Address[]">                      
                            <input class="text" type="text" placeholder="Address" name="Address[]">
                        </li>
                        </div>
                    </div>
                    <li>
                        <div class="head">Qualification:
                            <!--<div id="add-qualification" class="margin-left add-btn" style='position:relative; left:5%'>+</div>!-->
                        </div>
                        <!-- Qualification Fields--> 
                        <div id="qualification-section" class="tab">
                            <div class="styled-select" >
                                <select name="Qualification[]" tabindex="0" id="qualification">
                                    <option value="">Qualification *</option>
                                    <option value="1">Primary </option>
                                    <option value="2">Junior High</option>
                                    <option value="3">High School</option>                              
                                    <option value="4">College</option>
                                    <option value="5">University</option>
                                    <option value="6">Bachelor</option>
                                    <option value="7">Master</option>
                                    <option value="8">Doctor</option>
                                </select>
                            </div> 
                            <div id="qualification-error" class="error" ></div>
                            <br>
                        </div>
                    </li>
                    <li>
                        <input id="salary" class="text" placeholder="Desire for salary" type="number" name="Salary">    
                        <div id="salary-error" class="error" ></div>
                        <select id="currency" class="border-normal" style="position:absolute; margin-bottom:20px;" name="currency" tabindex="1">
                                 <option value="Dollar">$</option>
                                 <option value="VND">VND</option>                   
                        </select>
                       <div id="salary-error" class="error" ></div>
                    </li>

                    <li>
                        <div class="head">Working At: 
                        </div>
                        <div id="working-places-section" class="tab">
                            <input class="text margin-bottom" type="text" placeholder="Company Name" name="working-place"/>
                        </div>
                    </li>

                    <li>
                        <div class="head">Profile Link:
                            <div id="add-profile-link" class="margin-left add-btn" style='position:relative; left:6%'>+</div>
                        </div>
                        <div id="profile-link-error" class="error" ></div>
                        <div id="profile-link-section" class="tab">
                            <input id="profile-link" class="text margin-bottom" type="text" placeholder="URL to your Profile" name="profile-link[]"/>
                        </div>
                    </li>
<!--                        </div>-->
<!--                        Save button-->
                    <li>
                        <textarea class="text" name="description" placeholder="About me" rows="5" cols="30"></textarea>
                    </li>
                    <div id="main-form-bt" class="submit-bt">
                        Save
                    </div>
                </ol>
            </form>
            <!-- Welcome message -->
    <?php include js_url(true).'validate_things.php'?>
    <script>
        /* -------------------Uploading avatar ---------------*/
            function StopUpload(Result){
                    if(Result)
                    {
                        var i = new Date().getTime();
                        $("#avatar-image").attr("src","<?php echo image_url()?>"+Result+"?random="+i);
                        $("div.upload-file span").text("Successfully uploaded");
                        $("input#file_url").val("<?php echo image_url()?>"+Result);
                    }
                   else{
                       $("div.upload-file span").text("The uploading has been failed. Please try again");
                   }
                }

            function StartUpload(){
                $("div.upload-file span").text("Uploading....");
            }
            /* Upload file btn click */
            $("div.upload-file").on('click',function(){
                $("input#upload-file").click();
            });

            $("input#upload-file").on('change',function(){
                if(!checkFileName($(this).val()))
                {
                    $("div.upload-file span").text("Wrong type of file. Only JPG, JPEG, PNG and BMP is allowed");
                    return;
                }
                $("form#avatar-upload").submit();
            });
        /*--------------End of uploading avatar----------------------*/

        /*------------------Validate fields --------------*/
            /*------ Validate Name ------*/
            var validate_name = function(){
                var isPass = true;
                value = $("#UserName").val();
                if(value.length == 0){
                    $("#UserName-error").text("Name is required");
                    $("#UserName").attr("class","text-error");
                    isPass = false;
                }
                else{
                    $("#UserName-error").text("");
                    $("#UserName").attr("class","text");
                }
                return isPass;
            }           
            $("#UserName").on("change",validate_name);
            /*------ End of Validate Name ------*/

            /*------ Validate Age ------*/
            var validate_age = function(){
                var isPass = true;
                value = $("#Age").val();
                if(value.length == 0){
                    $("#Age-error").text("Age is required").show();
                    $("#Age").parent().attr("class","styled-select border-error");
                    isPass = false;
                }else{
                    $("#Age-error").hide();
                    $("#Age").parent().attr("class","styled-select");
                }
                return isPass;
            }           
            $("#Age").on("change",validate_age);
            /*------ End of Validate Name ------*/

            /*------ Validate sex ------*/
            var validate_sex = function(){
                var isPass = true;
                value = $("#Sex").val();
                if(value.length == 0){
                    $("#Sex-error").text("Sex is required").show();
                    $("#Sex").parent().attr("class","styled-select border-error");
                    isPass = false;
                }else{
                    $("#Sex-error").hide();
                    $("#Sex").parent().attr("class","styled-select");
                }
                return isPass;
            }           
            $("#Sex").on("change",validate_sex);
            /*------ End of Validate Sex ------*/

            /*------ Validate MarriedStatus ------*/
            var validate_marriedStatus = function(){
                var isPass = true;
                value = $("#MarriedStatus").val();
                if(value.length == 0){
                    $("#MarriedStatus-error").text("MarriedStatus is required").show();
                    $("#MarriedStatus").parent().attr("class","styled-select border-error");
                    isPass = false;
                }else{
                    $("#MarriedStatus-error").hide();
                    $("#MarriedStatus").parent().attr("class","styled-select");
                }
                return isPass;
            }           
            $("#MarriedStatus").on("change",validate_marriedStatus);
            /*------ End of Validate MarriedStatus ------*/

            /*------ Validate Qualifcation ------*/
            var validate_qualifcation = function(){
                var isPass = true;
                value = $('#qualification').val();
                if(value.length == 0){
                    $("#qualification-error").text("Qualification is required").show();
                    $("#qualification").parent().attr("class","styled-select border-error");
                    isPass = false;
                }else{
                    $("#qualification-error").hide();
                    $("#qualification").parent().attr("class","styled-select");
                }
                return isPass;
            }
            $("#qualification").on('change',validate_qualifcation);

            var validate_addtion_qualification = function() {
                var isPass = true;
                $(".addition-qualification").each(function(){
                    value = $(this).val();
                    if(value.length == 0 ){
                        isPass = false;
                        $(this).parent().remove();
                    }
                });
                return isPass;
            }

            var update_addition_qualification = function() {
                $("input[name='QualificationName[]']").on("change",function(){
                    value = $(this).val();
                    if(value.length == 0){
                        $(this).parent().remove();
                    }
                });
            }

            /*------ End of Validate Qualifcation ------*/


            /*----- Validate salary ------------*/
            var validate_salary = function(){
                var isPass = true;
                value = $("#salary").val();
                if(isNaN(value)){
                    $("#salary-error").text("Not a number").show();
                    $("#salary").attr("class","text-error");
                    isPass = false;
                }else{
                    $("#salary-error").hide();
                    $("#salary").attr("class","text");
                }
                return isPass;
            }           
            $("#salary").on("change",validate_salary);
            /*----- end of validate salary --------*/

            /*----- end of validate work at --------*/

            /*----- Validate profile link ----------*/
            var validate_all_profile_link = function(){
                var isPass = true;
                $('input[name="profile-link[]"]').each(function(){
                    value = $(this).val();
                    if(value.length == 0){
                        $(this).remove();
                        isPass = false;;
                    }else{
                        if(is_valid_url(value)){

                        }else{
                            $(this).attr("class","text-error margin-bottom");                   
                            isPass = false;
                        }
                    }
                });
                return isPass;
            }
            $('input[name="profile-link[]"]').on('change',function(){
                    value = $(this).val();
                    if(value.length == 0){
                        $(this).remove();
                    }else{
                        if(is_valid_url(value)){
                            $(this).attr("class","text margin-bottom");
                        }else{
                            $(this).attr("class","text-error margin-bottom");
                        }
                    }
            });

            /*----- end of validate profile link --------*/

        /*------------------End of validate fields-----------*/

        /*------------------Add button function -----------------------*/
            var address = 2;
            /* Add more location */
            $('#add-address').on('click',function(){
               var html = '<div>'
                        +'<div class="head">Address '+address+': </div>'
                        +'<li>'
                            +'<input class="text margin-bottom" type="text" placeholder="Province" name="Province[]" /> '
                            +'<input class="text margin-bottom" type="text" placeholder="City" name="City[]" />'
                        +'</li>'
                        +'<li>'
                            +'<input class="text margin-bottom" type="text" placeholder="District" name="District[]" /> '
                            +'<input class="text margin-bottom" type="text" placeholder="Address" name="Address[]" /> '
                        +'</li>'
                        +'</div>'
               $('#address-section').append(html);
               address++;
           });

           /* Add more Qualification */
    //           $('#add-qualification').on('click',function(){
    //               var html = '<div><input class="text margin-bottom" name="QualificationName[]" class="text margin-bottom" placeholder="Qualification or skill name" type="text"/>'
    //                          + '<input class="text margin-bottom" name="QualificationLevel[]" class="text margin-bottom" placeholder="Level or experience" type="text"/></div>';
    //               $('#qualification-section').append(html);
    //               update_addition_qualification();
    //           });

           /* Add more worked places */
           $('#add-worked-places').on('click',function(){
               var html = '<input class="text margin-bottom" type="text" placeholder="Company Name" name="worked-places[]"/>';
               $('#worked-places-section').prepend(html);
               update_worked_places();
               });
           /*Add more profile links */
           $('#add-profile-link').on('click',function(){
               var html = '<input id="profile-link" class="text margin-bottom" type="text" placeholder="URL to your profile" name="profile-link[]"/>';
               $('#profile-link-section').append(html);
               $('input[name="profile-link[]"]').on('change',function(){
                    value = $(this).val();
                    if(value.length == 0){
                        $(this).remove();
                    }else{
                        if(is_valid_url(value)){
                            $(this).attr("class","text margin-bottom");
                        }else{
                            $(this).attr("class","text-error margin-bottom");                   
                        }
                    }
                });
           });

           $("#delete-address").on('click',function(){
               address = address - 1;
               $('input[name="Province[]"]').last().parent().parent().remove();
           });
        /*------------------End of add button function -----------------------*/

        /*------------------Main form button click ----------------*/

        function validate_all_fields(){
            isPass = true;
            if(!validate_name()) isPass = false;
            if(!validate_age()) isPass = false; 
            if(!validate_sex()) isPass = false; 
            if(!validate_marriedStatus()) isPass = false; 
            if(!validate_qualifcation()) isPass = false; 
            if(!validate_salary()) isPass = false; 
            if(!validate_all_profile_link()) isPass = false; 
            if(!validate_addtion_qualification()) isPass = false; 
            return isPass;
        }

        $('#main-form-bt').on("click",function(){
            validate_all_fields();

            if(validate_all_fields()){
                $("#main-form").submit();
            }
        });
        /*------------------End of main form button click------------------*/
    </script>
   </section>
    
    <?php
    include './footer.php';?>